<!-- 楼栋页面-->
<template>
  <div>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="楼栋名称：">
        <el-input v-model="searchForm.buildingName" placeholder="请输入楼栋名称" size="mini"
                  style="width: 12vw"></el-input>
      </el-form-item>
      <el-form-item label="宿舍类型：">
        <el-select v-model="searchForm.dormitoryType" placeholder="请选择宿舍类型" size="mini" style="width: 12vw">
          <el-option label="女生宿舍" value="0"></el-option>
          <el-option label="男生宿舍" value="1"></el-option>
          <el-option label="混合宿舍" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话：">
        <el-input v-model="searchForm.contactPhone" placeholder="请输入联系电话" size="mini"
                  style="width: 12vw"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 搜索按钮 -->
        <el-button size="mini" type="primary" @click="fetchData">搜索</el-button>
        <!-- 清除按钮 -->
        <el-button size="mini" type="info" @click="handleReset">清除</el-button>
        <!--添加楼栋按钮-->
        <el-button size="mini" type="success" @click="showAddBuildingModal">添加楼栋</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
        :visible.sync="isAddBuildingModalVisible"
        title="添加楼栋信息"
        width="50%">
      <AddBuildings @buildingAdded="hideDialog" @submit="handleAddBuilding"></AddBuildings>
    </el-dialog>

    <el-dialog
        :visible.sync="isUpdateBuildingModalVisible"
        title="修改楼栋信息"
        width="50%">
      <UpdateBuildings :message="message" @buildingUpdate="hideDialog" @submit="handleUpDateBuilding"></UpdateBuildings>
    </el-dialog>


    <!--    展示楼栋列表-->
    <el-table :data="buildingList" border stripe>
      <el-table-column v-if="false" align="center" label="楼栋ID" prop="buildingId"></el-table-column>
      <el-table-column align="center" label="楼栋名称" prop="buildingName"></el-table-column>
      <el-table-column align="center" label="宿舍类型" prop="dormitoryType">
        <template slot-scope="scope">
          {{ dormitoryTypeMap[scope.row.dormitoryType] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="宿管" prop="housemasterName"></el-table-column>
      <el-table-column align="center" label="联系电话" prop="contactPhone"></el-table-column>
      <el-table-column header-align="center" label="地址" prop="address"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <!--          <el-link style="margin-left: 10px;" type="success" @click="handleEdit(scope.row)"> 查看 </el-link>-->
          <el-link style="margin-left: 10px;" type="primary" @click="showUpdateBuildingModal(scope.row.buildingId)">
            编辑
          </el-link>
          <el-link style="margin-left: 10px;" type="danger" @click="confirmDelete(scope.row.buildingId)"> 删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分页器 -->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import AddBuildings from '@/components/buildings/AddBuildings.vue';
import UpdateBuildings from '@/components/buildings/UpdateBuildings.vue';

export default {

  data() {
    return {
      message: '',
      isUpdateBuildingModalVisible: false,
      isAddBuildingModalVisible: false,
      // 条件查询的数据
      searchForm: {
        buildingName: '',//楼栋名称
        dormitoryType: '',//楼栋类型
        contactPhone: ''//联系电话
      },
      buildingList: [],
      dormitoryTypeMap: {
        0: '女生宿舍',
        1: '男生宿舍',
        2: '混合宿舍'
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  components: {
    AddBuildings,
    UpdateBuildings,
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 成功提示信息
    succeed(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },

    // 提示是否删除
    confirmDelete(buildingId) {
      // 弹出确认提示框
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定按钮后执行删除操作
        this.deleteBuilding(buildingId);
      }).catch(() => {
        // 用户点击取消按钮，不执行任何操作
      });
    },
    hideDialog() {
      this.isAddBuildingModalVisible = false;
      this.isUpdateBuildingModalVisible = false;
      // 调用搜索方法，重新加载数据
      this.fetchData();
    },
    showAddBuildingModal() {
      this.isAddBuildingModalVisible = true;
    },
    handleAddBuilding() {
      // 处理添加楼栋信息成功后的逻辑
      // 关闭模态框等操作
      this.isAddBuildingModalVisible = false;
    },

    showUpdateBuildingModal(buildingId) {
      this.message = buildingId;
      this.isUpdateBuildingModalVisible = true;
    },
    handleUpDateBuilding() {
      // 处理添加楼栋信息成功后的逻辑
      // 关闭模态框等操作
      this.isUpdateBuildingModalVisible = false;
    },


    // 清除搜索条件
    handleReset() {
      // 清空搜索条件对象
      this.searchForm.buildingName = '';
      this.searchForm.dormitoryType = '';
      this.searchForm.contactPhone = '';
      // 调用搜索方法，重新加载数据
      this.fetchData();
    },

    // 查询楼栋信息
    fetchData() {
      // 调用后端接口获取数据
      this.$axios.post('/api/buildings/page?pageNum=' + this.currentPage + '&pageSize=' + this.pageSize, {
        address: '',
        buildingId: '',
        buildingName: this.searchForm.buildingName,
        contactPhone: this.searchForm.contactPhone,
        dormitoryType: this.searchForm.dormitoryType,
        housemasterId: ''
      }, {headers: {'token': this.$store.getters.getToken}}).then(response => {
        // 请求成功后更新表格数据和分页信息
        if (response.data.code === 200) {
          this.buildingList = response.data.data.list;
          this.total = response.data.data.total;
          // 请求成功，处理响应
          this.succeed("查询成功");
        } else {
          this.$message.error(response.data.msg || '查询楼栋信息失败');
        }
      }).catch(error => {
        // 错误处理
        this.$message.error(error || '查询楼栋信息失败');
      });
    },
    handleSizeChange(size) {
      // 每页条数变更
      this.pageSize = size;
      this.fetchData();
    },
    handleCurrentChange(page) {
      // 当前页码变更
      this.currentPage = page;
      this.fetchData();
    },
    deleteBuilding(buildingId) {
      // 发送DELETE请求
      this.$axios.delete(`/api/buildings/delete/${buildingId}`)
          .then(response => {
            if (response.data.code === 200) {
              // 请求成功，处理响应
              this.succeed("删除成功");
              // 在这里可以根据需要执行一些操作，比如更新界面等
              this.fetchData();
            } else {
              this.$message.error(response.data.msg || '删除楼栋信息失败');
            }
          })
          .catch(error => {
            // 错误处理
            this.$message.error(error || '删除楼栋信息失败');
          });
    },
  }
};
</script>


